<template>
  <div>
    <a-tabs v-model:activeKey="activeKey" type="card" @change="tabChange">
      <a-tab-pane key="tab1" tab="第三方登录">
        <a-alert message="申请入口" type="info" show-icon style="margin-bottom: 18px">
          <template #description>
            微信登录：<a href="https://open.weixin.qq.com/" target="_blank">微信开放平台</a>
          </template>
        </a-alert>
        <a-form
          ref="FormRef"
          :model="FormState"
          :rules="FormRule"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-form-item label="微信登录APPID" has-feedback name="wechat_appid">
            <a-input v-model:value="FormState.wechat_appid" placeholder="请填写微信登录APPID" />
          </a-form-item>
          <a-form-item label="微信登录Secret" has-feedback name="wechat_secret">
            <a-input v-model:value="FormState.wechat_secret" placeholder="请填写微信登录Secret" />
          </a-form-item>
          <a-form-item label="企业微信CorpID" has-feedback name="ww_appid">
            <a-input v-model:value="FormState.ww_appid" placeholder="请填写企业微信的CorpID" />
          </a-form-item>
          <a-form-item label="企业微信网页应用ID" has-feedback name="ww_agentid">
            <a-input
              v-model:value="FormState.ww_agentid"
              placeholder="请填写企业微信的网页应用ID"
            />
          </a-form-item>
          <a-form-item label="企业微信网页应用密钥" has-feedback name="ww_agent_secret">
            <a-input
              v-model:value="FormState.ww_agent_secret"
              placeholder="请填写企业微信网页应用密钥"
            />
          </a-form-item>
          <a-form-item style="margin-left: 12.5%">
            <a-button type="primary" html-type="submit" :loading="ConfirmLoading" @click="OnSubmit">
              提交
            </a-button>
          </a-form-item>
        </a-form>
      </a-tab-pane>
      <a-tab-pane key="tab2" tab="验证码">
        <a-alert message="申请入口" type="info" show-icon style="margin-bottom: 18px">
          <template #description>
            开发者智能验证码：<a href="http://console.21ds.cn/library/Captcha" target="_blank">
              开通
            </a>
          </template>
        </a-alert>
        <a-form
          ref="FormRef2"
          :model="FormState"
          :rules="FormRule2"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-form-item label="验证码配置ID" has-feedback name="dragon_captcha_id">
            <a-input v-model:value="FormState.dragon_captcha_id" placeholder="请填写验证码配置ID" />
          </a-form-item>
          <a-form-item label="验证码SecretKey" has-feedback name="dragon_secret_key">
            <a-input
              v-model:value="FormState.dragon_secret_key"
              placeholder="请填写验证码SecretKey"
            />
          </a-form-item>
          <a-form-item style="margin-left: 12.5%">
            <a-button type="primary" html-type="submit" :loading="ConfirmLoading" @click="OnSubmit">
              提交
            </a-button>
          </a-form-item>
        </a-form>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts">
import { IconFont } from '@/components/iconfont'
import { defineComponent, reactive, toRefs, onMounted, ref, toRaw } from 'vue'
import { Row, Col, Tabs } from 'ant-design-vue'
import { UploadOutlined, PaperClipOutlined } from '@ant-design/icons-vue'
import { requestSuccess, requestFailed } from '@/utils/feedback'
import { getSysSetting, editSysSetting } from '@/api/system'

export default defineComponent({
  name: 'SysSetting',
  components: {
    IconFont,
    UploadOutlined,
    PaperClipOutlined,
    [Row.name]: Row,
    [Tabs.name]: Tabs,
    [Col.name]: Col
  },
  setup() {
    const FormRef = ref()
    const state = reactive({
      ConfirmLoading: false,
      activeKey: ref('tab1'),
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    })
    const FormState = reactive({
      wechat_appid: '',
      wechat_secret: '',
      dragon_secret_key: '',
      dragon_captcha_id: ''
    })

    const FormRule = {
      wechat_appid: [
        { required: false, message: '请填写微信登录APPID', trigger: ['blur', 'change'] }
      ],
      wechat_secret: [
        { required: false, message: '请填写微信登录Secret', trigger: ['blur', 'change'] }
      ]
    }
    const FormRule2 = {
      dragon_secret_key: [
        { required: false, message: '请填写密钥Key', trigger: ['blur', 'change'] }
      ],
      dragon_captcha_id: [{ required: false, message: '请填写', trigger: ['blur', 'change'] }]
    }
    onMounted(() => {
      getDataList()
    })

    const tabChange = () => {
      getDataList()
    }

    function getDataList() {
      getSysSetting({ tab: state.activeKey }).then((res) => {
        if (state.activeKey == 'tab1') {
          for (let item in res) {
            FormState[item] = res[item]
          }
        } else if (state.activeKey == 'tab2') {
          for (let item in res) {
            FormState[item] = res[item]
          }
        }
      })
    }
    const OnSubmit = () => {
      FormRef.value
        .validate()
        .then(() => {
          editSysSetting(toRaw(FormState))
            .then((res) => {
              if (res.code === 200) {
                requestSuccess(res)
              } else {
                requestFailed(res)
              }
            })
            .finally(() => {
              state.ConfirmLoading = false
            })
        })
        .catch(() => {
          return false
        })
    }
    return {
      ...toRefs(state),
      FormRef,
      FormState,
      FormRule,
      FormRule2,
      tabChange,
      OnSubmit,
      getDataList
    }
  }
})
</script>

<style lang="scss" scoped></style>
